<template>
  <div>
    <div class="search-div">
       <el-form label-width="100px" label-position="right">
            <el-row>
              <el-col :span="7">
                  <el-form-item label="产品名称：">
                      <el-input v-model="query.name" size="mini"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="7">
                  <el-form-item label="类目名称：">
                      <el-input v-model="query.productClassName" size="mini"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="7">
                  <el-form-item label="产品ID：">
                      <el-input v-model="query.id" size="mini"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="3">
                  <div style="padding-top:7px">
                      <el-button type="primary" @click="queryBtn" size="mini">查询</el-button>
                  </div>
              </el-col>
            </el-row>
        </el-form>
    </div>
    <!--表格数据-->
    <div>
        <el-table
        :data="page.list"
        border
        style="width: 100%">

        <el-table-column
            label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.imgUrl" style="width:80px;height:80px;"/>
            </template>
          </el-table-column>

          <template v-for="(item,index) in columns">
              <el-table-column
                :prop="item.property"
                :label="item.lable"
                :width="item.width">
              </el-table-column>
          </template>
         
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="deleteHandleClick(scope.row)" type="text" size="small">删除</el-button>
              <el-button @click="editHandleClick(scope.row)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table> 

        <!--分页组件-->
        <div style="padding:20px;">
            <el-pagination
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.current"
            :page-sizes="pageSizes"
            :page-size="query.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.count">
            </el-pagination>
        </div>

        <!--编辑弹出框-->
        <el-dialog
          title="修改产品信息"
          :visible.sync="dialogVisible"
          width="40%">
            <div style="width:400px;text-align:left;">
              <el-form ref="form" :model="dialogData" label-width="80px" label-position="left">
                <el-form-item label="产品名称">
                  <el-row>
                    <el-col :span="20">
                        <el-input v-model="dialogData.name"></el-input>
                    </el-col>
                    <el-col :span="4">
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-row>
                  <el-col :span="6">
                        <div style="width:150px;height:20px;"></div>
                  </el-col>
                  <el-col :span="18">
                      <el-upload
                        action="/api/product/addProductImg"
                        list-type="picture-card"
                        :on-success="fileUploadSuccess"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                  </el-col>
                </el-row>

                <el-form-item label="类目绑定">
                  <el-select v-model="dialogData.productClassName" placeholder="请选择产品类目">
                    <template v-for="(item,index) in productClassList">
                        <el-option :label="item.className" :value="item.className" :key="index"></el-option>
                    </template>
                  </el-select>
                </el-form-item>

                <el-form-item label="产品价格">
                  <el-row>
                    <el-col :span="20">
                        <el-input v-model="dialogData.price"></el-input>
                    </el-col>
                    <el-col :span="4">
                        
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="产品重量">
                  <el-row>
                    <el-col :span="20">
                        <el-input v-model="dialogData.weight"></el-input>
                    </el-col>
                    <el-col :span="4">
                        
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="产品规格">
                  <el-row>
                    <el-col :span="20">
                        <el-input v-model="dialogData.productSize"></el-input>
                    </el-col>
                    <el-col :span="4">
                        
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="产品库存">
                  <el-row>
                    <el-col :span="20">
                        <el-input v-model="dialogData.repertoryNumber" type="number"></el-input>
                    </el-col>
                    <el-col :span="4">
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="产品产地">
                  <el-row>
                    <el-col :span="20">
                        <el-input v-model="dialogData.originPlace"></el-input>
                    </el-col>
                    <el-col :span="4">
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit">保存</el-button>
                  <el-button @click="()=>{dialogVisible=!dialogVisible;}">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible2">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
  </div>
</template>

<script>
import { queryPageProduct , deleteProduct, getProductClass, updateProduct} from '@/server/index.js'
export default {
    components: {},
    data() {
       return {
         query:{
           size:10,
           current:1,
           name:'',
           className:'',
           id:null
         },
         page:{
           pageSize:10,
           pageNo:1,
           list:[],
           count:0
         },
         columns:[
              {
                property:"id",
                lable:"ID",
                width:"50"
              },
              {
                property:"name",
                lable:"产品名称",
                width:"110"
              },
              {
                property:"price",
                lable:"产品单价",
                width:"100"
              },
              {
                property:"weight",
                lable:"产品重量",
                width:"100"
              },
              {
                property:"productSize",
                lable:"规格",
                width:"150"
              },
              {
                property:"productClassName",
                lable:"类目名称",
                width:"150"
              },
              {
                property:"originPlace",
                lable:"产地",
                width:"100"
              },
              {
                property:"repertoryNumber",
                lable:"库存数量",
                width:"100"
              }
         ],
         pageSizes:[5,10,20,30,50],
         dialogVisible: false,
         dialogVisible2:false,
         dialogData:{},
         productClassList:[],
         dialogImageUrl:''
       };
    },
    methods: {
      // 查询初始化
      queryPage(){
        queryPageProduct(this.query).then((res)=>{
            this.page.list = res.data.records;
            this.query.size = res.data.size;
            this.page.count = res.data.total;
        });
      },
      handleSizeChange (pageSize) {
          // 改变数据条数
          this.query.size = pageSize;
          this.queryPage();
      },
      handleCurrentChange (pageNo) {
          // 改变页数
          this.query.current = pageNo;
          this.queryPage();
      },
      queryBtn(){
        // 查询操作
          this.current = 1;
          this.queryPage();
      },
      deleteHandleClick(rowData){
        // 操作-删除
        deleteProduct({id:rowData.id}).then((res)=>{
            this.$message.success("删除成功");
            this.queryPage();
        });
      },
      editHandleClick(rowData){
        // 操作-编辑
        this.dialogData = rowData;
        getProductClass().then((res)=>{
          this.productClassList = res.data.data;
        });
        this.dialogVisible = true;
      },
      handleRemove(file, fileList) {
        // 点击移除文件的钩子
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        // 点击查看文件的钩子
        this.dialogImageUrl = file.url;
        this.dialogVisible2 = true;
      },
      fileUploadSuccess(response, file, fileList){
        // 文件上传成功的钩子
        this.dialogData.imgUrl = response;
      },
      onSubmit(){
        // 保存修改
        updateProduct(this.dialogData).then((res)=>{
            this.dialogVisible = false;
            this.$message.success("修改成功");
        });
      }

    },
    created() {
        this.queryPage();
    }
};
</script>

<style scoped>

</style>